Javascript Visibility Toggle

By Hawkee on Sep 10, 2008

This is a very simple Javascript toggle that'll show or hide a div depending on its current state. Here is the HTML code:

<div onmouseover="toggle('mydiv');" onmouseout="toggle('mydiv');">Hover</div>
<div id='mydiv' style="visibility: hidden;">I see you!</div>
function toggle(obj) {
    var item = document.getElementById(obj);
    if(item.style.visibility == 'visible') { item.style.visibility = 'hidden'; }
    else { item.style.visibility = 'visible'; }
}

Comments

Sign in to comment.
mariu   -  Mar 08, 2013

Thank you! it was very useful.
How can I add to this code a duration for the toggle, and put for mouseout a fade, also with duration?

 Respond  
Korvin   -  Mar 03, 2010

if u need any help, i'm always willing =p

 Respond  
Hawkee   -  Mar 03, 2010

I've started to play around with jQuery a lot more lately and I'm very pleased with it. I'll likely be doing a lot more of the functionality here using it as I get around to it.

 Respond  
Korvin   -  Mar 02, 2010

jquery is much more efficient with this imo, since you have it, you should use it =p

<button>You cant see <div style='visibility:hidden;'>this</div></button>
<script>
$('button').hover(function(){jQuery(":first-child", this).css('visibility', 'visible');},function(){jQuery(":first-child", this).css('visibility', 'hidden');});</script>

The cool thing about this is the wide range of customization:

<table cellpadding=0 cellspacing=0><tr class='hov'><td>PLATFORMS</td><td style='width:30px; height:30px;'><img class='hidden' src='http://www.hawkee.com/images/bullet_arrow_down.png' /></td></tr></table>

OR

<div class='hov'>Hover<div class='hidden'>I see you!</div></div>
$(document).ready(function() {
    $('.hidden').hide();
    $('.hov').hover(function(){jQuery(".hidden",this).fadeIn();},function(){jQuery(".hidden",this).fadeOut();});
});

live example at http://left4quake.com/this.html
you'll find jquery is the best =]

outcome = unobtrusive lightweight effective dynamic code, also a really cool effect.

 Respond  
Hawkee   -  Sep 13, 2008

Good suggestion Digital, that's another way to do it.

 Respond  
DiGiTaL   -  Sep 13, 2008

You can also space some lines and change line 4-5 to:

item.style.visibility = (item.style.visibility == 'visible') ? 'hidden' : 'visible';

 Respond  
Hawkee   -  Sep 13, 2008

Yes, the point is to keep the space just as we've done in the site menu above when you hover over a link and the drop down arrow appears.

 Respond  
DiGiTaL   -  Sep 13, 2008

Your changing the visibility attribute, basically your saying if the visibility is OFF, keep that space but dont show it, if its on USING That space show it..

Visibility is not recommended it. change it to 'display'

 Respond  
vaseline28   -  Sep 11, 2008

Which one is that? And I guess it's best to add it in anyway, so as to cater for all versions.

 Respond  
Hawkee   -  Sep 11, 2008

Then I'm not sure why it made a difference for me, maybe its the version of IE I'm using.

 Respond  
vaseline28   -  Sep 11, 2008

Really? That's odd, several of my scripts have worked without it. I'll bear that in mind when creating more scripts, thanks!

 Respond  
Hawkee   -  Sep 11, 2008

Actually, you need the 'var' because IE errors out if you don't use it. I struggled with this in the past only to realize I had forgotten a var declaration.

 Respond  
vaseline28   -  Sep 11, 2008

Also, the 'var' before the variable name is not necessary, although there's no problem having it, I guess different people prefer doing things differently, it's definitely clearer having it there - but longer.

 Respond  
Hawkee   -  Sep 11, 2008

Thanks, I think it just helps make it more clear and reduces the overall number of characters used.

 Respond  
vaseline28   -  Sep 11, 2008

Nice work, interesting the way you chose to add the document.getELementById to a variable, then seperate for the styles, rather than assign the style to a variable and do:
document.getElementById(obj).style.visibility = style;
But works nicely :-)

 Respond  
Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.